<template>
  <div class="tabs-container">
    <div class="btns">
      <el-button class="btn" @click="handleOpen('push')">重推</el-button>
      <el-button class="btn" @click="handleOpen('wifi')">WIFI设置</el-button>
      <el-button class="btn" @click="handleOpen('server')">
        服务器设置
      </el-button>
      <el-button class="btn" @click="handleOpen('cache')">清除缓存</el-button>
      <el-button class="btn" @click="handleOpen('mode')">切换模式</el-button>
      <el-button class="btn" @click="handleOpen('screen')">
        横竖屏切换
      </el-button>
      <el-button class="btn" @click="handleOpen('bindVideo')">
        绑定视频
      </el-button>
      <el-button class="btn" @click="handleOpen('bindImg')">绑定图片</el-button>
      <!-- <el-button class="btn" @click="handleOpen('volume')">设置音量</el-button> -->
      <!-- <el-button class="btn" @click="handleOpen('code')">设备内部码</el-button> -->
      <el-button class="btn" @click="handleOpen('update')">固件升级</el-button>
      <!-- <el-button class="btn">开机图片</el-button> -->
      <el-button class="btn" @click="refreshStatus('refresh')">
        更新在线状态
      </el-button>
    </div>
    <Dialog
      :fields="fields"
      :title="title"
      :visible="dialogVisible"
      @close="handleClose"
      @confirm="handleConfirm"
    />
    <BindImgDialog
      :visible="bindImgDialogVisible"
      @close="bindImgDialogVisible = false"
      @confirm="bindImgDialogConfirm"
    />
    <BindVideoDialog
      :visible="bindVideoDialogVisible"
      @close="bindVideoDialogVisible = false"
      @confirm="bindVideoDialogConfirm"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, Ref } from 'vue'
  import Dialog from '../../components/dialog.vue'
  import { formFileds, titleFileds } from './form'
  import BindImgDialog from './bindImageDia.vue'
  import BindVideoDialog from './bindVideoDia.vue'

  const props = defineProps({
    multipleSelection: {
      type: Array as any,
      default() {
        return []
      },
    },
  })
  const dialogVisible = ref(false)
  const handleClose = () => {
    dialogVisible.value = false
  }
  const fields: Ref<any[]> = ref([])
  const title: Ref<string> = ref('')
  const dialogType: Ref<string> = ref('')
  const handleOpen = (type: string) => {
    if (!props.multipleSelection || props.multipleSelection.length === 0) {
      ElMessage({
        message: '请选择彩屏',
        type: 'warning',
      })
      return
    }
    dialogType.value = type
    // 推送
    if (type === 'push') {
      formFileds['push'][0].model = props.multipleSelection
        .map((item: any) => item.ID)
        .join(',')
      formFileds['push'][0].textArr = props.multipleSelection.map(
        (item: any) => item.CSName
      )
    }
    // 绑定图片
    if (type === 'bindImg') {
      bindImgDialogVisible.value = true
      return
    }
    if (type === 'bindVideo') {
      bindVideoDialogVisible.value = true
      return
    }
    fields.value = formFileds[type]
    title.value = titleFileds[type]
    console.log(fields.value)
    dialogVisible.value = true
  }
  const emit = defineEmits(['confirm'])
  const handleConfirm = (result: any) => {
    // console.log(result)
    dialogVisible.value = false
    emit('confirm', result, dialogType.value, props.multipleSelection)
    dialogType.value = ''
  }
  //  绑定图片
  const bindImgDialogVisible = ref(false)
  const bindImgDialogConfirm = (result: any) => {
    bindImgDialogVisible.value = false
    emit('confirm', result, dialogType.value, props.multipleSelection)
    dialogType.value = ''
  }
  // 绑定视频
  const bindVideoDialogVisible = ref(false)
  const bindVideoDialogConfirm = (result: any) => {
    bindVideoDialogVisible.value = false
    emit('confirm', result, dialogType.value, props.multipleSelection)
    dialogType.value = ''
  }
  // 刷新在线状态
  const refreshStatus = (type: string) => {
    dialogType.value = type
    emit('confirm', [], dialogType.value, props.multipleSelection)
    dialogType.value = ''
  }
</script>

<style lang="scss" scoped>
  .tabs-container {
    .btns {
      .btn {
        margin-bottom: 8px;
      }
    }
  }
</style>
